/** @jsxImportSource @antv/f2 */
import { Component } from '@antv/f2';

class Gauge extends Component {
    constructor(props, context, updater) {
        super(props, context, updater)
        // const { percent } = this.props
        // let percent = 0.4
        // const endAngle = Math.PI * ( 1 + percent )
        this.state = {
            centerX: 0, 
            centerY: 0,
            startAngle: Math.PI,
            endAngle: Math.PI,
            _percent: 0,
            r: '200px'
        }
    } 
    willMount() {
        const { left, top, width, height } = this.context,
            { _percent } = this.props,
            centerX = left + width / 2,
            centerY = top + height /1.5
        this.setState({
            centerX,
            centerY,
            endAngle: Math.PI * ( 1 + _percent ),
            _percent
        })
    }
    didMount() {
        
    }
    willReceiveProps(nextProps) {
        // this.updater.enqueueForceUpdate(_t, {percent: 0.2, endAngle: Math.PI * 2})
        super.willReceiveProps(nextProps)
        console.log(nextProps)
        // console.log(nextProps.percent)
        const { props: lastProps } = this,
            { _percent: nextData } = nextProps,
            { _percent: lastData } = lastProps
        if(nextData !== lastData) {
            console.log(nextData)
            this.changeAngle(nextData)
        }
    }
    changeAngle(percent) {
        console.log('change')
        const { startAngle } = this.state,
            endAngle = startAngle * (1 + percent)
        this.setState({
            _percent: percent,
            endAngle
        })
    }
    render() {
        const { centerX, centerY, r, startAngle, endAngle } = this.state
        return (
            <group>
                <arc 
                    attrs={{
                        x: centerX,
                        y: centerY,
                        r,
                        startAngle,
                        endAngle,
                        lineWidth: '20px',
                        lineCap: 'round',
                        stroke: '#fff'
                    }}
                    animation={{
                        update: {
                            duration: 500,
                            easing: 'linear',
                            property: ['endAngle']
                        }
                    }}
                />
            </group>  
        )
    }
}

export default Gauge